<template>
  <div>
    <!-- 顶部搜索框 -->
    <van-search placeholder="请输入小区或地址" show-action background="#21b97a">
      <template #left>
        <div>
          <van-icon
            name="arrow-left"
            size="20"
            color="#fff"
            @click="$router.push('/')"
          />
        </div>
      </template>
      <template #label>
        <div @click="$router.push('/citylist')">
          <span>{{ infocity }}</span> <i class="jo"></i>
        </div>
      </template>
      <template #action>
        <div>
          <van-icon
            name="location-o"
            size="20"
            color="white"
            @click="$router.push('/map')"
          />
        </div>
      </template>
    </van-search>
    <!-- 筛选导航 -->
    <van-tabs v-model="active">
      <!-- 循环四个顶部的tab -->
      <van-tab v-for="(item, i) in sige" :key="item">
        <!-- tab循环的名字 -->
        <template #title>
          <div @click="showPopup(i)">
            {{ item }} <van-icon name="arrow-down" />
          </div>
        </template>
        <!-- 弹出层内容 -->
        <van-popup v-model="show" duration="0">
          <div class="lower">
            <van-tabs v-model="active">
              <!-- 区域 -->
              <van-tab>
                <template #title>
                  <div>区域 <van-icon name="arrow-down" /></div>
                </template>
                <!-- 级联选择器 -->
                <van-picker
                  @cancel="show = false"
                  @confirm="handquy"
                  ref="quy"
                  show-toolbar
                  :columns="handlequyu"
                  toolbar-position="bottom"
                  value-key="label"
                />
              </van-tab>
              <!-- 方式 -->
              <van-tab>
                <template #title>
                  <div>方式 <van-icon name="arrow-down" /></div>
                </template>
                <!-- picker -->
                <van-picker
                  @cancel="show = false"
                  @confirm="handfangs"
                  show-toolbar
                  :columns="fangshide"
                  toolbar-position="bottom"
                  value-key="label"
                />
              </van-tab>
              <!-- 租金 -->
              <van-tab>
                <template #title>
                  <div>租金 <van-icon name="arrow-down" /></div>
                </template>
                <van-picker
                  @cancel="show = false"
                  @confirm="handzuj"
                  show-toolbar
                  :columns="zujinde"
                  toolbar-position="bottom"
                  value-key="label"
                />
              </van-tab>
              <!-- 筛选 -->
              <van-tab>
                <template #title>
                  <div @click="showPopup(3)">
                    筛选 <van-icon name="arrow-down" />
                  </div>
                </template>
              </van-tab>
            </van-tabs>
          </div>
        </van-popup>
      </van-tab>
    </van-tabs>
    <!-- 右侧弹出层 -->
    <div class="gai">
      <van-popup
        value-key="label"
        v-model="show1"
        position="right"
        :style="{ width: '70%' }"
      >
        <!-- 弹出层内容 -->
        <div class="screen">
          <dl>
            <dt>户型</dt>
            <dd @click="fn">
              <span
                v-for="(item, i) in roomType"
                :key="i"
                :data-nm="item.value"
                >{{ item.label }}</span
              >
            </dd>
            <dt>朝向</dt>
            <dd @click="fn">
              <span
                v-for="(item, i) in oriented"
                :key="i"
                :data-nm="item.value"
                >{{ item.label }}</span
              >
            </dd>
            <dt>楼层</dt>
            <dd @click="fn">
              <span v-for="(item, i) in floor" :key="i" :data-nm="item.value">{{
                item.label
              }}</span>
            </dd>
            <dt>房屋亮点</dt>
            <dd @click="fn">
              <span
                v-for="(item, i) in characteristic"
                :key="i"
                :data-nm="item.value"
                >{{ item.label }}</span
              >
            </dd>
          </dl>
        </div>
        <div class="btnbox">
          <button class="qing" @click="clearsp">清除</button>
          <button class="que" @click="handshaix">确定</button>
        </div>
      </van-popup>
    </div>
    <!-- 主体内容区域 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-card
        @click="jump(item.houseCode)"
        v-for="(item, i) in homelist"
        :key="i"
        :price="item.price + '元/月'"
        :desc="item.desc"
        :title="item.title"
        :thumb="'http://liufusong.top:8080' + item.houseImg"
      >
        <template #tags>
          <van-tag
            plain
            type="danger"
            v-for="(item, i) in item.tags"
            :key="i"
            >{{ item }}</van-tag
          >
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script>
import { getInfoCity, setHouse } from '@/utils/storage'
import { condition, houses } from '@/api/house'
export default {
  // 获取筛选数据
  async created() {
    const {
      body: {
        area, // 区域
        characteristic, // 房屋亮点
        floor, // 楼层
        oriented, // 朝向
        price, // 租金
        rentType, // 方式
        roomType, // 户型
        subway // 地铁
      }
    } = await condition(JSON.parse(getInfoCity()).value)
    // console.log(characteristic, floor, oriented, roomType)
    // 区域筛选条件
    this.quyude.push(area, subway)
    // 方式筛选条件
    this.fangshide = rentType
    // 租金筛选条件
    this.zujinde = price
    // 筛选筛选条件
    this.roomType = roomType
    this.oriented = oriented
    this.floor = floor
    this.characteristic = characteristic
  },
  name: 'find-page',
  data() {
    return {
      loading: false,
      finished: false,
      // 自定义循环的数据
      sige: ['区域', '方式', '租金', '筛选'],
      // 获取本地默认的城市名
      infocity: JSON.parse(getInfoCity()).label,
      // 弹出层的
      show: false,
      show1: false,
      // Tab切换的
      active: 0,
      // 区域级联选择数据
      quyude: [],
      // 方式的数据
      fangshide: [],
      // 租金的数据
      zujinde: [],
      // 筛选的数据
      // 户型
      roomType: '',
      // 朝向
      oriented: '',
      // 楼层
      floor: '',
      // 房屋亮点
      characteristic: '',
      // 来个测试数组
      ceshi: [],
      // 根据条件查询房屋   条件的数组
      findhome: {
        cityid: JSON.parse(getInfoCity()).value,
        area: null,
        subway: null,
        rentType: null,
        price: null,
        start: 1,
        end: 20,
        more: null
      },
      // 获取到的房屋信息列表的数组
      homelist: []
    }
  },
  computed: {
    // 级联选择的数据嵌套深度需要保持一致，如果部分选项没有子选项，可以使用空字符串进行占位
    handlequyu() {
      this.quyude.forEach((item) => {
        item.children[0].children = [{ label: '' }]
      })
      return this.quyude
    }
  },

  methods: {
    // 设置弹出层
    showPopup(i) {
      if (i !== 3) {
        this.show = true
        this.show1 = false
      } else {
        this.show = false
        this.show1 = true
      }
    },
    // 点击区域完成Gb
    async handquy() {
      console.log(this.$refs.quy[0].getColumnValue(1))
      if (this.$refs.quy[0].getColumnValue(0).label === '区域') {
        if (this.$refs.quy[0].getColumnValue(2).value !== 'null') {
          this.findhome.subway = null
          this.findhome.area = this.$refs.quy[0].getColumnValue(2).value
        } else if (this.$refs.quy[0].getColumnValue(2).value === 'null') {
          this.findhome.subway = null
          this.findhome.area = this.$refs.quy[0].getColumnValue(1).value
        }
      } else {
        if (this.$refs.quy[0].getColumnValue(2).value !== 'null') {
          this.findhome.area = null
          this.findhome.subway = this.$refs.quy[0].getColumnValue(2).value
        } else if (this.$refs.quy[0].getColumnValue(2).value === 'null') {
          this.findhome.area = null
          this.findhome.subway = this.$refs.quy[0].getColumnValue(1).value
        }
      }
      this.show = false
      // console.log(this.findhome)
      const res = await houses(this.findhome)
      // console.log(res)
      this.homelist = res.body.list
    },
    // 点方式完成
    async handfangs(res) {
      this.findhome.rentType = res.value
      this.show = false
      const res1 = await houses(this.findhome)
      this.homelist = res1.body.list
      // console.log(this.findhome)
    },
    // 点租金完成
    async handzuj(res) {
      // console.log(res)
      this.findhome.price = res.value
      this.show = false
      const res1 = await houses(this.findhome)
      this.homelist = res1.body.list
      console.log(this.findhome)
    },
    // 触底继续加载
    async onLoad() {
      // 发送获取房屋列表请求
      const res = await houses(this.findhome)
      console.log(res)
      this.homelist.push(...res.body.list)

      this.findhome.start += 20
      this.findhome.end += 20
      this.loading = false
      if (res.body.list.length === 0) {
        this.finished = true
      }
    },

    // 清除右侧方法
    fn(e) {
      if (e.target.tagName === 'SPAN') {
        if (e.target.classList.contains('pitch')) {
          e.target.classList.remove('pitch')
          this.ceshi = this.ceshi.filter((item) => item !== e.target.dataset.nm)
          // console.log(this.ceshi)
        } else {
          e.target.classList.add('pitch')
          // console.log(e.target.innerText)
          // console.log(e.target.dataset.nm)
          this.ceshi.push(e.target.dataset.nm)
          // console.log(this.ceshi)
        }
      }
    },
    async handshaix() {
      const arr = this.ceshi.join(',')
      // console.log(arr)
      this.findhome.more = arr
      this.show1 = false
      const res = await houses(this.findhome)
      this.homelist = res.body.list
      console.log(this.findhome)
    },
    clearsp() {
      // this.ceshi.forEach((item) => {
      //   console.log(document.querySelector([`data-nm=${item}`]))
      //   // document.querySelector(`span.dataset.${item}`).classList.remove('pitch')
      // })
      const arr = document.querySelectorAll('.pitch')
      for (let i = 0; i < arr.length; i++) {
        document.querySelector('.pitch').classList.remove('pitch')
      }
      this.ceshi = []
    },
    // 点击卡片跳转房屋详情页
    jump(res) {
      console.log(res)
      setHouse(res)
      this.$router.push('/house')
    }
  }
}
</script>

<style lang="less" scoped>
// 搜索框 部分样式
.van-search {
  position: absolute;
  top: 0px;
  z-index: 2;
  width: 100%;
  // padding: 20px;
  // background: transparent;
  // 左侧小部分
  .van-search__label {
    padding: 0;
    margin-right: 10px;
    // border-right: 1px solid #ccc;
    .jo {
      position: relative;
      top: 12px;
      left: 3px;
      width: 0;
      height: 0;
      border: 4px solid transparent;
      border-top-color: #7f7f80;
    }
  }
  // 边框？
  /deep/ .van-icon-search {
    border-left: 1px solid #ccc;
    padding-left: 7px;
  }
  // 左侧箭头
  /deep/ .van-icon-arrow-left {
    margin-right: 10px;
  }
}
// abab切换栏
/deep/ .van-tabs {
  position: sticky;
  top: 0;

  z-index: 2;
  margin-top: 55px;
  .van-tab--active {
    color: #21b97a;
  }
  .van-tabs__line {
    display: none;
  }
}
// 弹出层宽高样式
.van-popup {
  width: 100%;
  // height: 350px;
}
.van-popup--center {
  top: 256px;
}
.lower {
  transform: translateY(-52px);
}
// shaixuan
/deep/ .gai .van-popup--right {
  height: 100% !important;
}
// 取消确认样式
/deep/ .van-picker__toolbar {
  transform: translateY(52px);
  height: 50px;
}
/deep/ .van-picker__cancel {
  flex: 1;
  padding: 0;
  color: #21b97a;
  font-size: 18px;
  border-top: 1px solid #ccc;
}
/deep/ .van-picker__confirm {
  flex: 2;
  padding: 0;
  color: #fff;
  background-color: #21b97a;
  font-size: 18px;
}
// 右侧弹出层内容样式
.screen {
  dl {
    margin: 14px 0;
    padding: 0 15px;
    dt {
      margin: 20px 0;
    }
    dd {
      margin-left: 40px;
      padding-bottom: 14px;
      border-bottom: 1px solid #e5e5e5;
      span {
        display: inline-block;
        height: 32px;
        width: 70px;
        margin: 0 18px 15px 0;
        border: 1px solid #ddd;
        border-radius: 3px;
        line-height: 32px;
        text-align: center;
        font-size: 12px;
        color: #888;
      }
    }
  }
}
.pitch {
  border: 1px solid #21b97a !important;
  color: #21b97a !important;
  background-color: #defaef !important;
}
.btnbox {
  position: sticky;
  bottom: 0;
  height: 50px;
  display: flex;
  font-size: 18px;
  border-top: 1px solid #e9e9e9;
  .qing {
    flex: 1;
    background-color: #fff;
    color: #21b97a;
  }
  .que {
    flex: 2;
    background-color: #21b97a;
    color: #fff;
  }
}
</style>
